<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Simple HeatMap</title>


    <link href="../assets/styles.css" rel="stylesheet" />

    <style>
        #chart {
            max-width: 650px;
            margin: 35px auto;
        }
    </style>
</head>

<body>
    <div id="chart">

    </div>


    <script src="../../dist/apexcharts.js"></script>

    <script>
        /*
                // this function will generate output in this format
                // data = [
                    [timestamp, 23],
                    [timestamp, 33],
                    [timestamp, 12]
                    ...
                ]
                */
        function generateData(count, yrange) {
            var i = 0;
            var series = [];
            while (i < count) {
                var x = (i + 1).toString();
                var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

                series.push({
                    x: x,
                    y: y
                });
                i++;
            }
            return series;
        }


        var options = {
            chart: {
                height: 380,
                type: 'heatmap',
            },
            dataLabels: {
                enabled: false
            },
            colors: ["#008FFB"],
            series: [{
                    name: 'Metric1',
                    data: generateData(20, {
                        min: 0,
                        max: 90
                    })
                },
                {
                    name: 'Metric2',
                    data: generateData(20, {
                        min: 0,
                        max: 90
                    })
                },
                {
                    name: 'Metric3',
                    data: generateData(20, {
                        min: 0,
                        max: 90
                    })
                },
                {
                    name: 'Metric4',
                    data: generateData(20, {
                        min: 0,
                        max: 90
                    })
                },
                {
                    name: 'Metric5',
                    data: generateData(20, {
                        min: 0,
                        max: 90
                    })
                },
                {
                    name: 'Metric6',
                    data: generateData(20, {
                        min: 0,
                        max: 90
                    })
                },
                {
                    name: 'Metric7',
                    data: generateData(20, {
                        min: 0,
                        max: 90
                    })
                },
                {
                    name: 'Metric8',
                    data: generateData(20, {
                        min: 0,
                        max: 90
                    })
                },
                {
                    name: 'Metric9',
                    data: generateData(20, {
                        min: 0,
                        max: 90
                    })
                }
            ],
            xaxis: {
                type: 'category',
            },
            title: {
                text: 'HeatMap Chart (Single color)'
            },

        }

        var chart = new ApexCharts(
            document.querySelector("#chart"),
            options
        );

        chart.render();
    </script>
</body>

</html>